<template>
	<view class="info-content" v-if="!firstLoad">
		<view class="blank"></view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="shake flex justify-center">
				<view class="content">
					<u-tabs :list="nav" @click="navClick"
						lineColor="red"
						:activeStyle="{
							fontWeight: 'bold',
							color: '#000'
						}"
						:current="navSelect"
					></u-tabs>
				</view>
			</view>
			<view class="shake_blank"></view>
		</view>
		<!-- 内容区 -->
		<view class="content">
			<none-page v-if="contentList.length == 0"
				:src="nav[navSelect].icon"
				:tip="`暂无${nav[navSelect].name}内容！`"
				:width="400"
			></none-page>
			<view class="in" v-else>
				<draft v-if="navSelect == 0"
					:list="contentList"
				></draft>
				<waterful-list v-if="[1, 2].indexOf(navSelect) != -1"
					:list="contentList"
					@itemClick="goArticleDetails"
					:load="nav[navSelect].load"
					@getMore="reachBottom()"
				></waterful-list>
				
			</view>
			
			<view class="bottom_blank"></view>
		</view>
	</view>
	<loading-page v-else></loading-page>
</template>

<script>
	import nonePage from "@/components/none/none.vue";
	import waterfulList from "@/components/waterfulList/waterfulList.vue";
	import draft from "./draft.vue"
	
	import {mapState} from 'vuex';
	import {
		getUserCollect,
		getUserLike
	} from "@/api/user.js";
	
	export default {
		name: 'info-content',
		components: {
			nonePage,
			waterfulList,
			draft
		},
		props: {
			
		},
		data() {
			return {
				nav: [
					{
						name: '笔记',
						num: 11,
						icon: "/static/info/shiyanbiji.png",
						pageInfo: {
							page: 1,
							pageSize: 20
						},
						load: "loadmore"
					},
					{
						name: '收藏',
						num: 132,
						icon: "/static/info/zanwushoucangjilu.png",
						pageInfo: {
							page: 1,
							pageSize: 20
						},
						load: "loadmore"
					},
					{
						name: '点赞',
						num: 1233,
						icon: "/static/info/dianzan.png",
						pageInfo: {
							page: 1,
							pageSize: 20
						},
						load: "loadmore"
					}
				],
				notes: [],
				collections: [],
				likes: [],
				navSelect: 0,
				firstLoad: true
			}
		},
		computed: {
			...mapState({
				info: state => state.user.info
			}),
			contentList() {
				const items = {
					0: this.notes,
					1: this.collections,
					2: this.likes
				};
				if(this.navSelect == 0) this.getNotes();
				return items[this.navSelect];
			}
		},
		async mounted() {
			try{
				await this.getUserCollect();
				await this.getUserLike();
				this.getNotes();
				this.firstLoad = false;
			}catch(e){
				//TODO handle the exception
			}
		},
		onShow() {
			this.getNotes();
		},
		methods: {
			navClick(value) {
				this.$emit("tagTap", value);
				this.navSelect = value.index;
			},
			// 让父组件调用的触底事件
			reachBottom() {
				switch(this.navSelect) {
					case 0:
						this.getNotes();
						return;
					case 1:
						this.getUserCollect();
						return;
					case 2:
						this.getUserCollect();
						return;
					default:
						return;
				}
			},
			// 用户笔记
			getNotes() {
				let userDrafts = this.$cache.get("drafts_" + this.info.id);
				if(userDrafts) this.notes = userDrafts; 
			},
			//获取用户收藏
			getUserCollect() {
				// 处于加载中直接返回
				if(['loading', 'nomore'].indexOf(this.nav[1].load) != -1) return;
				// 设置成为loading状态
				this.nav[1].load = "loading";
				// 开始请求
				return new Promise((resolve, reject) => {
					getUserCollect(this.nav[1].pageInfo).then(res => {
						this.collections = [...this.collections, ...res.collections];
						// 判断当前是否加载完毕
						if(this.collections.length >= res.total) this.nav[1].load = "nomore";
						else {
							this.nav[1].load = "loadmore";
							this.nav[1].pageInfo.page++;
						}
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					});
				})
			},
			//获取用户点赞
			getUserLike() {
				// 处于加载中直接返回
				if(['loading', 'nomore'].indexOf(this.nav[2].load) != -1) return;
				// 设置成为loading状态
				this.nav[2].load = "loading";
				// 开始请求
				return new Promise((resolve, reject) => {
					getUserLike(this.nav[2].pageInfo).then(res => {
						this.likes = [...this.likes, ...res.likes];
						// 判断当前是否加载完毕
						if(this.likes.length >= res.total) this.nav[2].load = "nomore";
						else {
							this.nav[2].load = "loadmore";
							this.nav[2].pageInfo.page++;
						}
						resolve();
					}).catch(err => {
						this.$msg(err.message);
						reject();
					});
				})
			},
			// 去文章详情页
			goArticleDetails(value) {
				this.$go("/pages/article/index",{
					id: value.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.info-content{
	height: 400rpx;
	width: 100vw;
	background-color: white;
	margin-top: -10rpx;
	border-radius: 30rpx 30rpx 0 0;
	.blank{
		/* #ifndef H5 */
		height: 40rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 0rpx;
		/* #endif */
		width: 100vw;
	}
	.header{
		.shake{
			position: fixed;
			background-color: white;
			width: 100vw;
			height: 100rpx;
			/* #ifndef H5 */
			margin-top: -35rpx;
			/* #endif */
			/* #ifdef H5 */
			// margin-top: -0rpx;
			/* #endif */
			z-index: 99;
			.content{
				// background-color: white;
				width: 300rpx;	
			}
		}
		.shake_blank{
			width: 100vw;
			/* #ifndef H5 */
			height: 70rpx;
			/* #endif */
			/* #ifdef H5 */
			height: 105rpx;
			/* #endif */
		}
		::-webkit-scrollbar{
			display: none;
		}
	}
	.content{
		.none{
			width: 100vw;
			height: 800rpx;
			&Item{
				width: 300rpx;
				height: 300rpx;
			}
		}
		.bottom_blank{
			width: 100vw;
			height: 100rpx;
		}
	}
}	
</style>